<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>营销管理</el-breadcrumb-item>
      <el-breadcrumb-item>优惠券</el-breadcrumb-item>
      <el-breadcrumb-item>优惠券数据</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 20px">

        <p style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px" >
          <span style="font-size: 20px">优惠券数据</span></p>
        <el-descriptions class="margin-top"  :column="4" direction="vertical">
          <el-descriptions-item label="领取数量">{{this.couponData.receiveNum}}</el-descriptions-item>

          <el-descriptions-item label="使用张数">{{this.couponData.useNum}}</el-descriptions-item>
        </el-descriptions>
    </el-card>

    <el-card style="margin-top: 20px">
      <p style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px" >
        <span style="font-size: 20px">优惠券领取/使用报表</span></p>

      <el-table :data="couponData.list" border stripe>

        <el-table-column type="index"></el-table-column>
        <el-table-column label="获取用户Id" prop="userId"></el-table-column>
        <el-table-column label="获取用户" prop="userName"></el-table-column>
        <el-table-column label="获取时间" prop="receiveTime"></el-table-column>
        <el-table-column label="使用时间" prop="useTime">
          <template slot-scope="scope">
            <b v-show="scope.row.useTime === null">暂未使用</b>
            <b v-show="scope.row.useTime !== null" v-text="scope.row.useTime"></b>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

  </div>
</template>
<script>
export default {
  data() {
    return {

      couponData:{},
    }
  },
  methods: {


  },
  created() {
    this.couponData = this.$route.query.couponData;
    console.log(this.couponData);


  }
};
</script>
<style lang="less" scoped>
</style>